<script setup>
import RightClickMenu from './components/RightClickMenu.vue';
import RightClickItem from './components/RightClickItem.vue';

const handleItemClick = (item) => {
  console.log(item);
}
const BoxMenuClass= {
  background: 'pink',
  color: 'white',
  border: '1px solid black',
  textAlign: 'center',
}


</script>

<template>
  <div>
    <div class="box1" id="box1">

      <!-- for 属性绑定右键菜单的目标元素 -->
      <RightClickMenu forBox="box1">
        <!-- 右键菜单的每一项由 RightClickItem 组件渲染 -->
        <!-- itemClick 事件可以监听右键菜单的每一项点击 -->
        <RightClickItem @itemClick="handleItemClick">Item 1</RightClickItem>
        <!-- disabled 属性可以禁用右键菜单的某项 -->
        <RightClickItem disabled>Item 2</RightClickItem>
        <RightClickItem>Item 3</RightClickItem>
      </RightClickMenu>
    </div>
    <div class="box2" id="box2">
      <RightClickMenu forBox="box2">
        <RightClickItem>boxitem 1</RightClickItem>
        <RightClickItem>boxitem 2</RightClickItem>
        <RightClickItem>boxitem 3</RightClickItem>
      </RightClickMenu>

        <img src="./assets/db70bedf7eaec5e068ee5cd1c2a3aee59b30b23f.jpg" alt="" id="box2-img">
        <RightClickMenu forBox="box2-img" :menuStyle="BoxMenuClass">
          <RightClickItem>你是否承认</RightClickItem>
          <RightClickItem>爱莉希雅</RightClickItem>
          <RightClickItem>美貌盖世无双</RightClickItem>
          <RightClickItem>爱门 ~🎶</RightClickItem>
        </RightClickMenu>
      
    </div>
  </div>
</template>

<style scoped>
.box1 {
  width: 100%;
  height: 100px;
  background-color: #f00;
  position: relative;
}

.box2 {
  width: 100%;
  background-color: rgb(231, 180, 255);
}

 img{

  width: 150px;
}
</style>
